<template>
  <div class="lifecycle">
    <h1 id="h1">组件的生命周期</h1>
    <hr />
    <p>
      1、beforeCreate -> 使用 setup() <br />
      <br />
      2、created -> 使用 setup() <br />
      <br />
      3、beforeMount -> onBeforeMoun <br />
      <br />
      4、mounted -> onMounte <br />
      <br />
      5、beforeUpdate -> onBeforeUpdat <br />
      <br />
      6、updated -> onUpdate <br />
      <br />
      7、beforeDestroy -> onBeforeUnmoun <br />
      <br />
      8、destroyed -> onUnmounte <br />
      <br />
      9、errorCaptured -> onErrorCapture <br />
    </p>
    <button @click="add">++</button>
    <h3>{{ msg }}</h3>
  </div>
</template>
<script lang="ts" setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
} from "vue";

/* vue2 ------vue3 生命周期对比

1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()

3、beforeMount -> onBeforeMount

4、mounted -> onMounted

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated

7、beforeDestroy -> onBeforeUnmount

8、destroyed -> onUnmounted

9、errorCaptured -> onErrorCaptured
*/
let msg = ref<number>(0);
const add = () => {
  msg.value++;
};
console.log("----------setup");
onBeforeMount(() => {
  let h1 = document.querySelector("#h1");
  console.log("创建之前----onBeforeMount", h1);
});
onMounted(() => {
  let h1 = document.querySelector("#h1");
  console.log("创建完成----onMounted", h1);
});
onBeforeUpdate(() => {
  console.log("更新之前----onBeforeUpdate");
});
onUpdated(() => {
  console.log("更新完毕----onUpdated");
});

onBeforeUnmount(() => {
  console.log("卸载之前----onBeforeUnmount");
});
onUnmounted(() => {
  console.log("卸载之后----onUnmounted");
});
</script>
<style lang="less" scoped>
.lifecycle {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
